/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-08-08 13:35:23
 * @LastEditors: cuidm
 * @LastEditTime: 2022-08-15 18:16:47
 */
import React, { useState, useEffect } from "react";
import { Modal, Form, Button, Input,  message, Space, Radio, Select } from "antd";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import regexpUtil from "@/utils/regexpUtil";
import hcpUtils from "@/utils/hcpUtils";

const user = hcpUtils.getUser();
const CreateSetInstance = ({info, visible, setVisible, onCreateFinish})  => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [type, setType] = useState("0");
	const [moduleData, setModuleData] = useState([]);

	const getTableData = async (params = { current: 1, pageSize: 10000000 }) => {
        setLoading(true);
        try {
            const res = await request({
                ...cmdbres.querySetTemplate,
                data: {
                    bizId: info.bizId
                },
            });
            setLoading(false);
            if (res && res.data) {
                setModuleData(res.data);
            } else {
                setTableData([]);
            }
        } catch (error) {
            console.log(error);
        } 
    };

	useEffect(() => {
		getTableData()
	}, []);

	const onFinish = async (values) => {
		setLoading(true);
		let param = {
			setName: values.setName,
			bizId: info.bizId,
			parentId: info.instanceId,
			createType: values.createType,
			setTemplateId: values.createType == "0" ? values.setTemplateId : 0,
			author: user.staffName
		}
		let res = await request({
			...cmdbres.createSetInstance,
			data: param
		});
		setLoading(false);
		if (res && res.code == 200) {
			setVisible(false);
			message.success(`新建集群成功！`);
			if (typeof onCreateFinish == "function") onCreateFinish(res);
		}
	};

	const onCancel = () => {
		setVisible(false);
	}

	return (
		<Modal
			title="新建集群"
			className="hcp-modal-sm"
			visible={visible}
			footer={null}
			onCancel={onCancel}
			destroyOnClose
			maskClosable={false}
			afterClose={()=>{form.resetFields()}}
		>
			<Form
				form={form}
				labelCol={{ span: 5 }}
				wrapperCol={{ span: 18 }}
				name="basic"
				onFinish={onFinish}
			>
				<Form.Item label="已选择">
					<span>{info?.instanceName??'-'}</span>
				</Form.Item>
				<Form.Item label="创建类型" name="createType" initialValue={"0"}>
					<Radio.Group
						defaultValue="fixed"
						style={{ width: '100%', marginBottom: 10 }}
						buttonStyle="solid"
						onChange={(e)=> {setType(e.target.value)}}
						value={type}
					>
						<Radio.Button value="0">
							从模板新建
						</Radio.Button>
						<Radio.Button value="1">
							直接新建
						</Radio.Button>
					</Radio.Group>
				</Form.Item>
				{
					type == "0" && <Form.Item
						label="集群模板"
						name="setTemplateId"
						rules={[
							{
								required: true,
								message: '请选择集群模板',
							},
						]}
					>
						<Select
							placeholder="请选择"
							style={{ width: "100%", marginRight: 10 }}
							getPopupContainer={(triggerNode) =>
								triggerNode.parentElement
							}
						>
							{
								moduleData.map((item, index) => (
									<Select.Option
										key={item.id}
										value={item.id}
									>
										{item.name}
									</Select.Option>
								))
							}
						</Select>
					</Form.Item>
				}
				<Form.Item 
					label="集群名称" 
					name="setName"
					rules={[
						{
							required: true,
							message: '名称不能为空',
						},
					]}
				>
					<Input placeholder="请输入集群名称" maxLength={256}/>
				</Form.Item>
				<div className="hcp-modal-body-footer">
					<Form.Item wrapperCol={{ span: 24 }} >
						<Button onClick={onCancel}>取消</Button>
						<Button type="primary" htmlType="submit" loading={loading}>提交</Button>
					</Form.Item>
				</div>
			</Form>
		</Modal>
	)
}

export default CreateSetInstance;
